<template>
	<view class="baseForm">
		<!-- 搜索&扫码 -->
		<view class="upload-scan">
			<u-search
				v-model="searchContent"
				shape="round"
				bgColor="#fff"
				:show-action="true"
				actionText="搜索"
				:animation="true"
				class="search"
				@search="searchList"
				@clear="searchList"
				@custom="searchList"></u-search>
			<u-icon
				name="scan"
				size="27px"
				:bold="false"
				@click="scanHandle"></u-icon>
		</view>
		<!-- tab-bar切换 -->
		<view class="tab-bar">
			<u-tabs
				:current="activeTab"
				:list="tabList"
				:scrollable="false"
				:activeStyle="{
					color: '#000',
					fontWeight: 'bold',
					transform: 'scale(1.04)',
				}"
				lineWidth="50px"
				lineHeight="2px"
				lineColor="#007aff"
				@change="changeTab"></u-tabs>
		</view>

		<!-- 待点检 -->
		<view v-if="activeTab === 0" class="activeHeight">
			<!-- 中间文字 -->
			<view
				style="
					margin: 15px 0;
					width: 100%;
					text-align: center;
					font-weight: 700;
					font-size: 16px;
				">
				{{ props.standardName }}
			</view>
			<!-- 中间图片 -->
			<view
				style="
					margin: 15px 0;
					width: 100%;
					display: flex;
					justify-content: center;
				">
				<view>
					<!-- <upload-image
						:multiple="false"
						:list="image ?? []"
						:isRead="true"
						folderName="eam/mold/routingInspection"></upload-image> -->
					<u--image
						@click="imageListPreview()"
						:src="oneImages"></u--image>
				</view>
			</view>
			<!-- 中间按钮 -->
			<view class="submit_btn_div">
				<button
					style="margin: 10px 15px 10px 15px; border-radius: 10px"
					type="primary"
					:disabled="postLoading"
					:loading="postLoading"
					@click="
						spotCheckSubmit(
							'/eam/mold/pointInspection/components/pointInspectionCreate',
							sopStandardId,
							'1',
							'0'
						)
					"
					class="submit_btn">
					点 检
				</button>
			</view>
			<!-- 列表 -->
			<u-list
				ref="tableScroll"
				@scrolltolower="scrolltolower"
				v-if="totalPage"
				class="list"
				:height="listHeight"
				lowerThreshold="50px"
				:pagingEnabled="true">
				<u-list-item
					v-for="(item, index) in tableList"
					:key="item.id"
					@click="
						jumpEdit(
							'/eam/mold/pointInspection/components/pointInspectionEdit',
							item.id,
							'1',
							'0',
							props.sopStandardId
						)
					">
					<view class="card">
						<!-- 三种状态：待点检，点检中，点检完成 -->
						<view
							class="flex flex-col justify-between flex-1 h-full">
							<view class="record-content">
								<view class="record-item record-title">
									<text class="line1_span line1_span_width">
										{{ item.assetCode }}
									</text>
									<text>
										{{
											item?.orderStatus == 0
												? "未提交"
												: item?.orderStatus == 1
												? "未提交"
												: item?.orderStatus == 2
												? "已提交"
												: item?.orderStatus == 3
												? "异常"
												: ""
										}}
									</text>
								</view>
								<view class="record-item">
									<!-- <text>设备编号</text> -->
									<text>{{ item?.assetName || "" }}</text>
									<text>
										{{ item?.locationName || "" }}
									</text>
								</view>
								<view
									class="record-item"
									v-if="item?.problemDesc">
									<text>问题描述</text>
									<text>
										{{ item?.problemDesc || "" }}
									</text>
								</view>
								<view class="record-item">
									<view style="display: flex">
										<view style="display: flex">
											<text>未检</text>
											<text>
												({{
													item?.notInspectedNumber ||
													"0"
												}})
											</text>
										</view>
										<view
											style="
												display: flex;
												margin-left: 10px;
											">
											<text style="color: red">异常</text>
											<text style="color: red">
												({{
													item?.exceptionNumber ||
													"0"
												}})
											</text>
										</view>
									</view>
								</view>
								<!-- <view class="record-item">
									<text>点检标准</text>
									<text>
										{{ item?.sopStandardName || "--" }}
									</text>
								</view> -->
							</view>
						</view>
					</view>
				</u-list-item>
			</u-list>
			<view class="flex justify-center" v-show="tableLoading">
				<u-loading-icon color="#000a7b"></u-loading-icon>
			</view>
			<!-- 空数据 -->
			<view v-show="tableList.length === 0 && !tableLoading">
				<u-empty
					mode="list"
					icon="http://cdn.uviewui.com/uview/empty/list.png"></u-empty>
			</view>
		</view>

		<!-- 已点检 -->
		<view v-if="activeTab === 1" class="activeHeight">
			<!-- 列表 -->
			<u-list
				@scrolltolower="finishScrolltolower"
				class="list"
				v-if="finishTotal"
				:height="listHeight"
				lowerThreshold="50px">
				<u-list-item
					v-for="(item, index) in finishTableList"
					:key="item.id"
					@click="
						jumpEdit(
							'/eam/mold/pointInspection/components/pointInspectionEdit',
							item.id,
							'1',
							'1',
							props.sopStandardId
						)
					">
					<view class="card">
						<!-- 三种状态：待点检，点检中，点检完成 -->
						<view
							class="flex flex-col justify-between flex-1 h-full">
							<view class="record-content">
								<view class="record-item record-title">
									<text class="line1_span line1_span_width">
										{{ item.assetCode }}
									</text>
									<text>
										{{
											item?.orderStatus == 0
												? "未提交"
												: item?.orderStatus == 1
												? "未提交"
												: item?.orderStatus == 2
												? "已提交"
												: item?.orderStatus == 3
												? "异常"
												: ""
										}}
									</text>
								</view>
								<view class="record-item">
									<!-- <text>设备编号</text>
									<text>{{ item?.assetCode || "--" }}</text> -->
									<!-- <text>设备编号</text> -->
									<text>{{ item?.assetName || "" }}</text>
									<text>
										{{ item?.locationName || "" }}
									</text>
								</view>
								<view
									class="record-item"
									v-if="item?.problemDesc">
									<text>问题描述</text>
									<text>
										{{ item?.problemDesc || "" }}
									</text>
								</view>
								<view class="record-item">
									<!-- 	<text>完成时间</text>
									<text>{{ item?.workTime || "" }}</text> -->
									<view style="display: flex">
										<text style="color: red">异常</text>
										<text style="color: red">
											({{ item?.exceptionNumber || "0" }})
										</text>
									</view>
									<text>{{ item?.workTime || "0" }}</text>
								</view>
								<!-- <view class="record-item">
									<text>点检标准</text>
									<text>
										{{ item?.sopStandardName || "--" }}
									</text>
								</view> -->
								<!-- <view class="record-item">
									<text>点检结果</text>
									<text
										:class="
											item?.checkResult == 0
												? 'red-color'
												: ''
										">
										{{
											item?.checkResult == 0
												? "不合格"
												: item?.checkResult == 1
												? "合格"
												: "无"
										}}
									</text>
								</view> -->
							</view>
						</view>
					</view>
				</u-list-item>
			</u-list>
			<view class="flex justify-center" v-show="finishTableLoading">
				<u-loading-icon color="#000a7b"></u-loading-icon>
			</view>
			<!-- 空数据 -->
			<view v-show="finishTableList.length === 0 && !finishTableLoading">
				<u-empty
					mode="list"
					icon="http://cdn.uviewui.com/uview/empty/list.png"></u-empty>
			</view>
		</view>
		<!-- 异常 -->
		<view v-if="activeTab === 2" class="activeHeight">
			<!-- 列表 -->
			<u-list
				@scrolltolower="abnormalScrolltolower"
				class="list"
				:height="listHeight"
				v-if="abnormalTotal"
				lowerThreshold="50px">
				<u-list-item
					v-for="(item, index) in abnormalTableList"
					:key="item.id"
					@click="
						jumpEdit(
							'/eam/mold/pointInspection/components/pointInspectionEdit',
							item.id,
							'1',
							'1'
						)
					">
					<view class="card">
						<!-- 三种状态：待点检，点检中，点检完成 -->
						<view
							class="flex flex-col justify-between flex-1 h-full">
							<view class="record-content">
								<view class="record-item record-title">
									<text class="line1_span line1_span_width">
										{{ item.assetCode }}
									</text>
									<text>
										{{
											item?.orderStatus == 0
												? "未提交"
												: item?.orderStatus == 1
												? "未提交"
												: item?.orderStatus == 2
												? "已提交"
												: item?.orderStatus == 3
												? "异常"
												: ""
										}}
									</text>
								</view>
								<view class="record-item">
									<!-- <text>设备编号</text>
									<text>
										{{ item?.assetCode || "--" }}
									</text> -->
									<text>{{ item?.assetName || "" }}</text>
									<text>
										{{ item?.locationName || "" }}
									</text>
								</view>
								<view
									class="record-item"
									v-if="item?.problemDesc">
									<text>问题描述</text>
									<text>
										{{ item?.problemDesc || "" }}
									</text>
								</view>
								<view class="record-item">
									<!-- 	<text>完成时间</text>
									<text>
										{{ item?.workTime || "--" }}
									</text> -->
									<view style="display: flex">
										<text style="color: red">异常</text>
										<text style="color: red">
											({{ item?.exceptionNumber || "0" }})
										</text>
									</view>
									<text>{{ item?.workTime || "0" }}</text>
								</view>
								<!-- 	<view class="record-item">
									<text>点检标准</text>
									<text>
										{{ item?.sopStandardName || "--" }}
									</text>
								</view> -->
								<!-- <view class="record-item">
									<text>点检结果</text>
									<text
										:class="
											item?.checkResult == 0
												? 'red-color'
												: ''
										">
										{{
											item?.checkResult == 0
												? "不合格"
												: item?.checkResult == 1
												? "合格"
												: "无"
										}}
									</text>
								</view> -->
							</view>
						</view>
					</view>
				</u-list-item>
			</u-list>
			<view class="flex justify-center" v-show="abnormalTableLoading">
				<u-loading-icon color="#000a7b"></u-loading-icon>
			</view>
			<!-- 空数据 -->
			<view
				v-show="
					abnormalTableList.length === 0 && !abnormalTableLoading
				">
				<u-empty
					mode="list"
					icon="http://cdn.uviewui.com/uview/empty/list.png"></u-empty>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import {
	onShow,
	onPullDownRefresh,
	onLoad,
	onBackPress,
} from "@dcloudio/uni-app";
import { http } from "@/utils/http";
import { PageResult, TabInfo } from "@/types/type";
import { getSecondTime } from "@/utils/common";
import UploadImage from "@/components/upload-image-ssr.vue";
import { toScanCode } from "@/components/hs-scancode/scan.js";
function qrcodeSucess(data) {
	uni.showModal({
		title: "成功",
		content: data,
		success: () => {
			// uni.navigateBack({})
		},
	});
}
function qrcodeError(err) {
	console.log(err);
	uni.showModal({
		title: "摄像头授权失败",
		content: "摄像头授权失败，请检测当前浏览器是否有摄像头权限。",
		success: () => {
			// uni.navigateBack({})
		},
	});
}

const activeTab = ref(0);
const tabList = [
	{ name: "待点检", value: 0 },
	{ name: "已点检", value: 2 },
	{ name: "异常", value: 3 },
];
function changeTab(val: TabInfo) {
	console.log(val);
	activeTab.value = val.index;

	if (val.index === 0 && !tableList.value.length) {
		// 待点检
		console.log("待点检");
		loadmore();
	} else if (val.index === 1 && !finishTableList.value.length) {
		// 已点检
		console.log("已点检");
		finishLoadmore();
	} else if (val.index === 2 && !abnormalTableList.value.length) {
		// 异常
		console.log("异常");
		abnormalLoadmore();
	}

	// if (val.index === 0) {
	// 	// 待点检
	// 	console.log("待点检");
	// 	loadmore();
	// } else if (val.index === 1) {
	// 	// 已点检
	// 	console.log("已点检");
	// 	finishLoadmore();
	// } else if (val.index === 2) {
	// 	// 异常
	// 	console.log("异常");
	// 	abnormalLoadmore();
	// }
}

// 待点检数据
const tableList = ref([]);
const tableLoading = ref(false);
const current = ref(0);
const totalPage = ref(0);
const total = ref(0);

async function loadmore(type?: string) {
	try {
		current.value += 1;
		tableLoading.value = true;
		const result: PageResult<any> = await http({
			method: "POST",
			url: "/eam/mouldPointinspectionOrder/queryMyList",
			data: {
				current: current.value,
				size: 20,
				data: {
					inspectionStatus: "0",
					searchContent: searchContent.value,
				},
			},
		}).finally(() => {
			tableLoading.value = false;
		});
		const list = result.data;
		for (let i = 0; i < list.length; i++) {
			tableList.value.push(list[i]);
		}
		totalPage.value = result.page;
		total.value = result.total;
		type === "refresh" && uni.stopPullDownRefresh();
	} catch (e) {
		console.log(e);
	}
}
const scrolltolower = () => {
	totalPage.value > current.value && loadmore();
};
const postLoading = ref(false);
// 点击点检按钮
function spotCheckSubmit(
	item = "",
	sopStandardId = "",
	assetKind = "",
	Read = "0"
) {
	postLoading.value = true;
	uni.navigateTo({
		url: `/pages${item}?sopStandardId=${sopStandardId}&assetKind=${assetKind}&isRead=${Read}`,
		fail: () => {
			uni.showToast({
				title: "敬请期待",
				icon: "error",
			});
		},
	});
	postLoading.value = false;
}
// 点击修改
function jumpEdit(
	item = "",
	id = "",
	assetKind = "",
	Read = "0",
	sopStandardId = ""
) {
	uni.navigateTo({
		url: `/pages${item}?id=${id}&assetKind=${assetKind}&isRead=${Read}&sopStandardId=${sopStandardId}`,
		fail: () => {
			uni.showToast({
				title: "敬请期待",
				icon: "error",
			});
		},
	});
}
// 已点检数据
const finishTableList = ref([]);
const finishTableLoading = ref(false);
const finishCurrent = ref(0);
const finishTotalPage = ref(0);
const finishTotal = ref(0);

// 已完成列表获取
async function finishLoadmore(type?: string) {
	try {
		finishCurrent.value += 1;
		finishTableLoading.value = true;
		const result: PageResult<any> = await http({
			method: "POST",
			url: "/eam/mouldPointinspectionOrder/queryMyList",
			data: {
				current: finishCurrent.value,
				size: 20,
				data: {
					inspectionStatus: "2",
					searchContent: searchContent.value,
				},
			},
		}).finally(() => {
			finishTableLoading.value = false;
		});
		const list = result.data;
		for (let i = 0; i < list.length; i++) {
			finishTableList.value.push(list[i]);
		}
		finishTotalPage.value = result.page;
		finishTotal.value = result.total;
		type === "refresh" && uni.stopPullDownRefresh();
	} catch (e) {
		console.log(e);
	}
}
const finishScrolltolower = () => {
	finishTotalPage.value > finishCurrent.value && finishLoadmore();
};
// 异常数据
const abnormalTableList = ref([]);
const abnormalTableLoading = ref(false);
const abnormalCurrent = ref(0);
const abnormalTotalPage = ref(0);
const abnormalTotal = ref(0);

// 异常数据列表获取
async function abnormalLoadmore(type?: string) {
	try {
		abnormalCurrent.value += 1;
		abnormalTableLoading.value = true;
		const result: PageResult<any> = await http({
			method: "POST",
			url: "/eam/mouldPointinspectionOrder/queryMyList",
			data: {
				current: abnormalCurrent.value,
				size: 20,
				data: {
					inspectionStatus: "3",
					searchContent: searchContent.value,
				},
			},
		}).finally(() => {
			abnormalTableLoading.value = false;
		});
		const list = result.data;
		for (let i = 0; i < list.length; i++) {
			abnormalTableList.value.push(list[i]);
		}
		abnormalTotalPage.value = result.page;
		abnormalTotal.value = result.total;
		type === "refresh" && uni.stopPullDownRefresh();
	} catch (e) {
		console.log(e);
	}
}
const abnormalScrolltolower = () => {
	abnormalTotalPage.value > abnormalCurrent.value && abnormalLoadmore();
};

//列表高度
const listHeight = ref("");
onLoad(() => {
	// #ifdef H5
	listHeight.value = "calc(100vh - 84px - 44px)";
	// #endif

	// #ifdef APP-PLUS
	listHeight.value = "calc(100vh - 44px - 44px)";
	// #endif
	loadmore();
	getImages();
});

onPullDownRefresh(() => {
	searchList();
});

// 点击扫码
const searchContent = ref("");
// function openScan() {
// 	/* #ifdef H5 */
// 	uni.showToast({
// 		icon: "none",
// 		title: "请到安卓设备进行扫码",
// 	});
// 	/* #endif */
// 	// 只允许通过相机扫码
// 	uni.scanCode({
// 		scanType: ["barCode", "qrCode"],
// 		onlyFromCamera: true,
// 		success: function (res) {
// 			searchContent.value = JSON.stringify(res.result);
// 			searchList();
// 			console.log("条码类型：" + res.scanType);
// 			console.log("条码内容：" + res.result);
// 		},
// 	});
// }

function scanHandle() {
	toScanCode({
		onlyFromCamera: true, // 只允许通过相机扫码
	})
		.then((res) => {
			uni.showToast({
				icon: "success",
				title: "扫码成功",
			});
			searchContent.value = res;
			searchList();
		})
		.catch((e) => {
			uni.showToast({
				icon: "error",
				title: e,
			});
		});
}

// 列表搜索
function searchList() {
	// 点检
	current.value = 0;
	tableList.value = [];
	loadmore("refresh");
	// 已点检
	finishCurrent.value = 0;
	finishTableList.value = [];
	finishLoadmore("refresh");
	// 异常
	abnormalCurrent.value = 0;
	abnormalTableList.value = [];
	abnormalLoadmore("refresh");
}

// 获取路由传回的参数
const props = defineProps({
	sopStandardId: {
		type: String,
		default: "",
	},
	standardName: {
		type: String,
		default: "",
	},
});
const { sopStandardId, standardName } = toRefs(props);
// 获取newPointCheckOrderList列表
const newPointCheckOrderList = ref([]);
let boxTitle = ref("");
let image = ref([
	{
		fileType: "jpg",
		filename: "1867085595675856896.jpg",
		name: "5.jpg",
		originalfilename: "5.jpg",
		path: "test/info",
		status: "success",
		uid: 1733982869487,
		url: "test/info/1867085595675856896.jpg",
	},
	{
		fileType: "jpg",
		filename: "1867085595675856896.jpg",
		name: "5.jpg",
		originalfilename: "5.jpg",
		path: "test/info",
		status: "success",
		uid: 1733982869488,
		url: "test/info/1867085595675856896.jpg",
	},
]);
let images = ref([]);
let oneImages = ref("");
const uploadApi = process.env.VITE_APP_UPLOAD_API;
const imageListPreview = () => {
	console.log("1111", images.value);
	uni.previewImage({
		current: oneImages.value, // 当前显示图片的链接，默认是第一个
		urls: images.value, // 需要预览的图片链接列表
		indicator: "number", // 显示底部指示器
		loop: true, // 是否开启循环播放
	});
};

const getNewPointCheckOrder = async (sopStandardList) => {
	const result: PageResult<any> = await http({
		method: "POST",
		url: "/eam/mouldPointInspectionOrder/newPointCheckOrder",
		data: sopStandardList,
	});

	newPointCheckOrderList.value = result.data;
	console.log("newPointCheckOrderList", result.data);
	boxTitle.value = result.data.sopStandardName;

	// newPointCheckOrderList.value?.images?.forEach((item) => {
	// 	images.value.push({
	// 		url: `${uploadApi}/system/fileCenter/preview/${item.url}`,
	// 	});
	// });
	// oneImages.value = images?.value[0].url;
	// image.value.push(result.data.images[0]);

	// image.value.push(result.data.images[0]);s
	console.log(oneImages.value, images.value);
	console.log("boxTitle.value", boxTitle.value);
};

async function getImages() {
	console.log("props.sopStandardId", props.sopStandardId);
	images.value = [];
	const result: PageResult<any> = await http({
		method: "GET",
		url: `/eam/eamsopstandardimg/getList/${props.sopStandardId}`,
	});
	console.log("getImages", result.data);
	// images.value=result.data
	images.value = [];
	result.data.forEach((item) => {
		images.value.push(`${uploadApi}/system/fileCenter/preview/${item.url}`);
	});
	oneImages.value = images?.value[0];
}

// 再次获取首页检点标准  然后根据传回的id赋值整条数据
const sopStandardList = ref([]);
const getSopStandardList = async () => {
	sopStandardList.value = [];
	const result: PageResult<any> = await http({
		method: "POST",
		url: "/eam/mouldPointInspection/getSopStandardList",
		data: {},
	});
	result.data.forEach((item) => {
		if (item.id == sopStandardId.value) {
			sopStandardList.value.push(item);
		}
	});
	// getNewPointCheckOrder(sopStandardList.value[0]);
};

if (props.sopStandardId) {
	// getSopStandardList();
	getImages();
}

let tables = ref([
	{
		assetCode: "OF3",
		assetId: "1851835967747022850",
		assetKind: 4,
		assetName: "OF3",
		checkPersonId: null,
		checkPersonName: null,
		checkResult: null,
		createTime: "2024-11-21 17:56:10",
		createdUserId: "1",
		createdUserName: "管理员",
		deleted: 0,
		details: null,
		executePersonId: "1",
		executePersonName: "管理员",
		id: "1859536271772909569",

		lastUpdateTime: "2024-12-11 11:34:08",
		lastUpdatedUserId: "1",
		lastUpdatedUserName: "管理员",
		orderNo: "202411210050",
		orderStatus: 1,
		planId: null,
		planName: "0001",
		planNo: "0001",
		planTime: "2024-11-24 00:00:00",
		remarks: null,
		sopStandardCode: "AL",
		sopStandardId: "1856883981203058690",
		sopStandardName: "AL设备精度点检(2月)",
		sopTypeCode: "EquipPrecisionInspect",
		sopTypeId: "1856700683105382402",
		sopTypeName: "设备精度点检",
		version: 2,
		workTime: "2024-12-11 11:34:08",
	},
	{
		assetCode: "OF3",
		assetId: "18518359677470228501",
		assetKind: 4,
		assetName: "OF3",
		checkPersonId: null,
		checkPersonName: null,
		checkResult: null,
		createTime: "2024-11-21 17:56:10",
		createdUserId: "1",
		createdUserName: "管理员",
		deleted: 0,
		details: null,
		executePersonId: "1",
		executePersonName: "管理员",
		id: "1859536271772909569",

		lastUpdateTime: "2024-12-11 11:34:08",
		lastUpdatedUserId: "1",
		lastUpdatedUserName: "管理员",
		orderNo: "202411210050",
		orderStatus: 1,
		planId: null,
		planName: "0001",
		planNo: "0001",
		planTime: "2024-11-24 00:00:00",
		remarks: null,
		sopStandardCode: "AL",
		sopStandardId: "1856883981203058690",
		sopStandardName: "AL设备精度点检(2月)",
		sopTypeCode: "EquipPrecisionInspect",
		sopTypeId: "1856700683105382402",
		sopTypeName: "设备精度点检",
		version: 2,
		workTime: "2024-12-11 11:34:08",
	},
]);

onBackPress(() => {
	back1();
	return true;
});
const back1 = () => {
	uni.navigateTo({
		url: "/pages/eam/mold/pointInspection/index",
	});
};
</script>

<style lang="scss" scoped>
uni-page-body {
	height: 100%;
	background-color: $primary-bg-color;
}
.search {
	:deep(.u-search__content) {
		box-shadow: 0 1px 8px 0px rgb(19 10 236 / 8%);
	}
}
.baseForm {
	background-color: $primary-bg-color;
	height: 100%;
	.tab-bar {
		padding: 0 40px;
	}
	.upload-scan {
		padding: $uni-page-padding;
		padding-top: 5px;
		padding-bottom: 1px;
		display: flex;
		align-items: center;
		// box-shadow: 0 1px 10px 0px rgb(19 10 236 / 10%);
		.u-icon {
			margin-left: 8px;
		}
	}
	.u-line {
		padding: 10px 0;
	}
}
.list {
	.card {
		margin: $uni-page-padding;
		margin-top: 4px;
		margin-bottom: 4px;
		border-radius: 7px;
		padding: 7px 10px 7px 10px;
		transition: all 300ms ease;
		box-shadow: 0 1px 5px rgba(19, 11, 236, 0.13);
		background-color: #fff;
		.card-flex {
			display: flex;
			align-items: flex-start;
		}
		.right {
			flex: 1;
		}
		.title {
			font-size: 14px;
			line-height: 40px;
			height: 40px;
			margin-top: 8px;
			font-weight: bold;
			color: #101010;
			border-top: 1px solid #e5ebff;
		}
		.uni-btn {
			float: right;
			font-size: 12px;
			height: 24px;
			line-height: 24px;
			padding: 0 15px;
			margin-top: 7px;
			font-weight: 400;
		}
		.des {
			font-size: 12px;
			line-height: 20px;
			// height: 20px;
			margin-bottom: 3px;
		}
		.left {
			// flex: 1;
			flex-basis: calc(50% + 10px);
		}
	}
}

.record-title {
	font-size: 15px;
	font-weight: bold;
	// margin: 10px 0 !important;
}
.record-footer {
	// height: 30px;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	margin: 10px 0 17px;
	.record-btn {
		height: 30px;
		outline: none;
		border: none;
		line-height: 30px;
		border-radius: 6px;
		font-size: 14px;
		margin: 0px;
		margin-left: 10px;
		padding: 0 12px;
	}
	.reach {
		background-color: $primary-btn-color;
		color: #ffffff;
	}
	.canel {
		background-color: #ffffff;
		color: $primary-btn-color;
		// border: 1px solid $primary-btn-color;
	}
	.complete {
		background-color: #ffffff;
		color: $primary-btn-color;
		border: 1px solid $primary-btn-color;
	}
}
.u-loading-icon {
	margin: 8px 0;
}
.record-content .record-item > :first-child {
	min-width: 79px;
}
:deep(.line1_span_width) {
	width: calc(100% - 58px) !important;
	span {
		width: 100% !important;
	}
}
</style>